<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" :isrefresh="true">
			<block style="color: #777777;font-size: 32rpx;" slot="content">隐患上报</block>
		</cu-custom>
		<view class="content">
			<form class="mui-input-group" @submit="formSubmit">
				<view class="mui-input-row box-height">
					<label>隐患名称</label>
					<input v-model="form.name" required="required" type="text" placeholder="请输入隐患名称" />
				</view>
				<view class="mui-input-row box-height">
					<label>隐患地点</label>
					<input v-model="form.address" required="required" type="text" placeholder="请输入详细的隐患地点" />
				</view>
				<view class="mui-input-row box-height">
					<label>隐患描述</label>
					<input v-model="form.remark" required="required" type="text" placeholder="请输入具体情况描述" />
				</view>
				<view class="mui-input-row">
					<label>隐患图片</label>
					<view class="upload-img" @click="openImg">
						<image style="width: 100%;height: 100%;" mode="aspectFit" :src="form.abnormalPic" v-if="form.abnormalPic"></image>
						<uni-icons class="clear" type="closeempty" size="20" color="#333" v-if="form.abnormalPic" @click.native.stop="clearImg"></uni-icons>
						<uni-icons type="plusempty" size="30" color="#fff" v-else></uni-icons>
					</view>
				</view>
				<view class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary" form-type="submit">生成隐患工单</button>
				</view>
			</form>
		</view>
		<message />
	</view>
</template>

<script>
	import * as constants from '@/common/config.js';
	export default {
		data() {
			return {
				form: {
					name: '',
					address: '',
					remark: '',
					abnormalPic: '',
					equipmentId: '',
					taskId: '',
					mainDataId: '',
					mark: ''
				}
			};
		},
		onLoad(option) {
			this.form.equipmentId = option.equipmentId
			this.form.taskId = option.ucId
			this.form.mainDataId = option.mainDataId
			this.form.mark = option.mark
		},
		onShow() {
		},
		methods: {
			openImg() {
				uni.chooseImage({
					count: 1,
					success: (file) => {
						uni.uploadFile({
							url: constants.API + 'wx/common/upload',
							header: {
								"authorization": getApp().globalData.getToken('authorization')
							},
							filePath: file.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								const { data } = JSON.parse(res.data)
								this.form.abnormalPic = data
							},
							fail: this.clearImg
						})
					},
					fail: () => {},
					complete: () => {}
				})
			},
			clearImg() {
				this.form.abnormalPic = ''
			},
			formSubmit(e) {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入隐患名称',
						icon: 'error'
					})
					return
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请输入隐患地点',
						icon: 'error'
					})
					return
				}
				if (!this.form.remark) {
					uni.showToast({
						title: '请输入隐患描述',
						icon: 'error'
					})
					return
				}
				if (!this.form.abnormalPic) {
					uni.showToast({
						title: '请上传隐患图片',
						icon: 'error'
					})
					return
				}
				let app = getApp()
				app.globalData.request({
					url: 'wx/inHiddenDanger/maintenanceGenerateHiddenDanger',
					data: this.form
				}).then(res => {
					uni.showToast({
						title: '隐患上报成功',
						icon: 'success',
						mask: true,
						duration: 2000
					})
					setTimeout(function () {
						uni.navigateBack()
					}, 2000);
				})
			}
		}
	}
</script>

<style lang="scss">
.mui-input-group {
	margin-top: 10px;
	padding-bottom: 10px;
	display: block;
	position: relative;
	background-color: #fff;
	border: 0;
	&::before {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		content: '';
		background-color: #c8c7cc;
		transform: scaleY(.5);
	}
	&::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		background-color: #c8c7cc;
		transform: scaleY(.5);
	}
	.mui-input-row {
		position: relative;
		overflow: hidden;
		clear: left;
		display: flex;
		align-items: center;
		&::after {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
			height: 1px;
			content: '';
			background-color: #c8c7cc;
			transform: scaleY(.5);
			box-sizing: border-box;
		}
		label {
			float: left;
			width: 25%;
			padding: 11px 15px;
			font-family: "Helvetica Neue",Helvetica,sans-serif;
			line-height: 1.1;
		}
		input {
			float: right;
			width: 75%;
			padding-left: 0;
			margin-bottom: 0;
			 border:none;   
			height: 30rpx;
			outline: 0;
		}
		.upload-img {
			position: relative;
			margin: 10px 0;
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			background: #909399;
			.clear {
				position: absolute;
				top: -5px;
				right: -5px;
				line-height: initial;
				background: #fff;
				border-radius: 50%;
				box-shadow: 0 0 5px #333;
			}
		}
	}
	.mui-button-row {
		position: relative;
		margin-top: 10px;
		text-align: center;
	}
}
.mui-btn {
	position: relative;
	margin: 0 10px;
	padding: 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42;
	text-align: center;
	cursor: pointer;
	&.mui-btn-primary {
		color: #fff;
		background-color: #007aff;
	}
}

.box-height {
	height: 45px !important;
}
</style>
